<template>
  <div class="app-container home">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-row :gutter="10">
                <el-col :span="16">
                  <h3>店铺信息</h3>
                </el-col>
                <el-col :span="8" align="right">
                  <el-button type="primary" size="small" plain @click="openDialog('店铺配置', shopVo)">店铺设置</el-button>
                </el-col>
              </el-row>
            </div>
          </template>
          <div v-if="shopVo">
            <el-row :gutter="10">
              <el-col :span="8">
                <shop-data-info iconType="image" :icon="shopVo.headPortrait" title="店铺名称" :value="shopVo.name" />
              </el-col>
              <el-col :span="8">
                <shop-data-info icon="Box" title="店铺状态" :value="shopVo.shopStatusLabel" />
              </el-col>
              <el-col :span="8">
                <shop-data-info icon="Management" icon-color="danger" title="服务费免缴余额" :value="shopVo.shopWallet.officialSubsidyMoney" />
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <h3>运营信息</h3>
            </div>
          </template>
          <div v-if="shopVo">
            <el-row :gutter="10">
              <el-col :span="8">
                <shop-data-info icon="User" title="玩家数量" :value="shopVo.userCount" />
              </el-col>
              <el-col :span="8">
                <shop-data-info icon="Star" title="粉丝数量" :value="shopVo.realFans" />
              </el-col>
              <el-col :span="8">
                <shop-data-info icon="Basketball" title="成团数量" :value="shopVo.realCollage" />
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>
<!--      <el-descriptions-->
<!--        title="店铺信息"-->
<!--        direction="vertical"-->
<!--        :column="7"-->
<!--        border-->
<!--        v-if="shopVo">-->
<!--        <el-descriptions-item label="店铺Logo">-->
<!--          <image-preview :src="shopVo.headPortrait" width="100px" height="100px"/>-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="店铺名称">-->
<!--          {{shopVo.name}}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="店铺状态">-->
<!--          <dict-tag :options="shop_status" :value="shopVo.shopStatus"/>-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="粉丝数量">-->
<!--          {{shopVo.realFans}}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="成团数量">-->
<!--          {{shopVo.realCollage}}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="服务费免缴余额">-->
<!--          {{shopVo.shopWallet.officialSubsidyMoney}}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="客服信息">-->
<!--          <div>-->
<!--            <image-upload v-model="shopVo.wxImagePath" :limit="1" tipInfo="客服二维码"/>-->
<!--          </div>-->
<!--          <div style="display: flex">-->
<!--            <div>-->
<!--              <el-input v-model="shopVo.wxChat" placeholder="请输入微信号" style="width: 200px;"/>-->
<!--            </div>-->
<!--            <div style="margin-left: 10px">-->
<!--              <el-popconfirm title="确定要更新客服信息吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="submitUpdateWeChatInfo">-->
<!--                <template #reference>-->
<!--                  <el-button type="primary" size="small" plain>保存</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-descriptions-item>-->
<!--      </el-descriptions>-->
    </div>
    <div style="margin-top: 10px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <h3>销售信息</h3>
              </div>
            </template>
            <div v-if="shopStatisticsInfoVo">
              <el-row :gutter="10">
                <el-col :span="8">
                  <shop-data-info icon="Histogram" title="今日总流水" :value="shopStatisticsInfoVo.todayTotalFlow" yearOnYearLabel="实付金额" :yearOnYear="shopStatisticsInfoVo.todayTotalPayFlow" monthOnMonthLabel="优惠金额" :monthOnMonth="shopStatisticsInfoVo.todayTotalDiscountsFlow" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Histogram" iconColor="warning" title="本周总流水" :value="shopStatisticsInfoVo.weekTotalFlow" yearOnYearLabel="实付金额" :yearOnYear="shopStatisticsInfoVo.weekTotalPayFlow" monthOnMonthLabel="优惠金额" :monthOnMonth="shopStatisticsInfoVo.weekTotalDiscountsFlow" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Histogram" icon-color="danger" title="本月总流水" :value="shopStatisticsInfoVo.monthTotalFlow" yearOnYearLabel="实付金额" :yearOnYear="shopStatisticsInfoVo.monthTotalPayFlow" monthOnMonthLabel="优惠金额" :monthOnMonth="shopStatisticsInfoVo.monthTotalDiscountsFlow" />
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 10px">
                <el-col :span="8">
                  <shop-data-info icon="Money" title="今日成团金额（实付）" :value="shopStatisticsInfoVo.todayCompleteCollageAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Box" iconColor="warning" title="本周成团金额（实付）" :value="shopStatisticsInfoVo.weekCompleteCollageAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Present" icon-color="danger" title="本月成团金额（实付）" :value="shopStatisticsInfoVo.monthCompleteCollageAmount" />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-row :gutter="10">
                  <el-col :span="16">
                    <h3>结算信息</h3>
                  </el-col>
                  <el-col :span="8" align="right">
                    <h4 style="margin-right: 5px; color: red" v-if="shopVo">服务费比例：{{shopVo.totalServiceChargeRatio}}%</h4>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div v-if="shopStatisticsInfoVo">
              <el-row :gutter="10">
                <el-col :span="8">
                  <shop-data-info icon="PieChart" title="今日结算金额" :value="shopStatisticsInfoVo.todaySettlementAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="SuitcaseLine" iconColor="warning" title="本周结算金额" :value="shopStatisticsInfoVo.weekSettlementAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Odometer" icon-color="danger" title="本月结算金额" :value="shopStatisticsInfoVo.monthSettlementAmount" />
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 10px">
                <el-col :span="8">
                  <shop-data-info icon="Coin" title="今日已到账金额" :value="shopStatisticsInfoVo.todaySettlementSuccessAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Goods" iconColor="warning" title="本周已到账金额" :value="shopStatisticsInfoVo.weekSettlementSuccessAmount" />
                </el-col>
                <el-col :span="8">
                  <shop-data-info icon="Wallet" icon-color="danger" title="本月已到账金额" :value="shopStatisticsInfoVo.monthSettlementSuccessAmount" />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-bod width="35%">
      <el-form ref="shopFormRef" :model="shopForm" label-width="auto">
        <el-form-item label="客服微信二维码" prop="wxImagePath">
          <image-upload v-model="shopForm.wxImagePath" :limit="1" tipInfo="客服二维码" />
        </el-form-item>
        <el-form-item label="客服微信号" prop="wxChat">
          <el-input v-model="shopForm.wxChat" placeholder="请输入微信号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-popconfirm title="确定要更新客服信息吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="submitUpdateWeChatInfo">
            <template #reference>
              <el-button type="primary" plain>保存</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" lang="ts">
import { queryShopInfo, updateWeChatInfo, queryShopStatisticsInfo } from '@/api/system/shop';
import { ShopStatisticsInfoVO, ShopVO } from '@/api/system/shop/types';
import { ref } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { shop_status } = toRefs<any>(proxy?.useDict('shop_status'));

const shopVo = ref<ShopVO>();
const shopStatisticsInfoVo = ref<ShopStatisticsInfoVO>();
const shopForm = reactive<any>({
  shopId: 0,
  wxImagePath: '',
  wxChat: ''
});

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const queryShopInfoData = async() => {
  const res = await queryShopInfo();
  shopVo.value = res.data;
};

const submitUpdateWeChatInfo = async() => {
  console.log(shopForm);
  const res = await updateWeChatInfo(shopForm);
  proxy?.$modal.msgSuccess("操作成功");
  await queryShopInfoData();
  dialog.visible = false;
};

const queryShopStatisticsInfoData = async() => {
  const res = await queryShopStatisticsInfo();
  shopStatisticsInfoVo.value = res.data;
};

const openDialog = (title: string, data?: ShopVO) => {
  dialog.title = title;
  dialog.visible = true;
  if(data){
    shopForm.shopId = data.shopId;
    shopForm.wxImagePath = data.wxImagePath;
    shopForm.wxChat = data.wxChat;
  }
};

onMounted(() => {
  queryShopInfoData();
  queryShopStatisticsInfoData();
});
</script>

<style scoped lang="scss">
.home {
  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }
}
</style>
